html,body,div,ul,li,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p,table,thead,tbody,tfoot,tr,th,td,form,a {
    margin:0;
    padding:0;
    border:0;
}
* {
    box-sizing:border-box;
}
a {
    margin:0;
    padding:0;
    border:0;
    text-decoration: none;
    font-size:inherit;
    color:inherit;
}
a:hover {
    margin:0;
    padding:0;
    border:0;
    text-decoration: none;
    font-size:inherit;
    color:inherit;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
.clear {
    clear:both;
    width:0;
    padding:0;
    line-height:0;
}
input {
    display:inline-block;
}

/*清湖格式=========================*/
html,body {
    background: #f5f5f5;
    color: #757575;
    /*height:100%;*/
}
/*section===============*/


section {
    position:relative;
}
.login {
    display: none;
}
aside {
    width:68px;
    height:68px;
    position:absolute;
    top:0;
    right:0;
    opacity:0.5;
    background-image:url(../img/login.gif);
    transition: opacity 0.4s;
}
aside:hover {
    opacity:1;
}
hr{
    display: inline-block;
    width:120px;
    border:none;
    height:1px;
    border-bottom: 1px solid #b0b0b0;
}
span {
    color:#b0b0b0;
}
div {
    margin-top:20px;
}
.icon {
    width:30px;
    height:30px;
    display:inline-block;
    background-image:url(../img/icon2.png) ;
    background-size: 200% 400%;
}
.r1 {
    background-position:-30px 0;
}
.r3 {
    background-position:-30px 60px;;
}
.r4 {
    background-position:-30px 90px;;
}
.r1:hover {
    background-position:0 0;
}
.r2:hover {
    background-position:0 30px;
}
.r3:hover {
    background-position:0 60px;
}
.r4:hover {
    background-position:0 90px;
}
section p {
    color:#757575;
    margin-top:50px;
}
section {
    background:white;
    margin:0 auto;
    text-align: center;
}
section img {
    width:50px;
    height:50px;
    margin-top:50px;
}

h4 {
    padding-top:22px;
    color: #424242;
}
input[type=text] {
    margin-top:20px;
    border:1px solid #e0e0e0;
}
input[type=password] {
    border:1px solid #e0e0e0;
}
input {
    width:356px;
    height:48px;
    margin-bottom: 14px;
    padding:13px 16px 13px 14px;
    color:#333;
    outline:none;
}
input[type=submit] {
    width:358px;
    height:50px;
    cursor: pointer;
    background-color: #ef5b00;
    font-size: 14px;
    color: #fff;
    text-align:center;
    border:none;
    margin-top:30px;
    margin-bottom: 25px;
}

footer {
    height: 80px;
    margin-top: -80px;
    line-height: 1.5;
    text-align: center;
}
footer p:first-child {
    font-size:12px;
    color:#333;
    font-family: arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","微軟正黑體","儷黑 Pro",sans-serif;
}
footer p:last-child{
    height:45px;
    padding:10px 0;
    text-align: center;
    font-size:12px;
    color:#333;
    font-family: arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","微軟正黑體","儷黑 Pro",sans-serif;
}
footer p img {
    height:20px;
    width:20px;
    margin:0;
}
footer p:first-child span:nth-child(2n-1) {
    padding: 0 10px;
    color:#333;
}

@media screen and (min-width:850px)  {
    section {
        width:854px;
        height:604px;
        margin:100px auto;
        margin-bottom: 150px;
    }

    h4 {
        font-size: 30px;
    }
}
@media screen and (max-width:850px) {
    section {
        width:400px;
        height:500px;
        margin:0 auto;
        margin-bottom: 100px;
    }
    section p {
        margin:0;
    }
    h4 {
        font-size: 22px;
    }
    footer {
        height: 80px;
        margin-top: -80px;
        line-height: 1.5;
        text-align: center;
    }
}


